<template>
  <div class="container" v-loading="loading">
    <div class="other-content" v-show="true">
      <button class="floating-button" @click="goBack">{{ $t("返回") }}</button>
      <button class="floating-button" @click="exportCSV">
        {{ $t("导出") + "CSV" }}
      </button>
    </div>
    <div>
      <el-table
        class="my-table"
        ref="singleTableRef"
        :data="tableData"
        style="width: 100%"
        highlight-current-row
        @row-click="rowClick"
      >
        <el-table-column
          prop="RecordTime"
          :label="$t('时间')"
           min-width="175"
           width="175"
        ></el-table-column>
        <el-table-column
          v-for="field in fields"
          :key="field.Name"
          :prop="field.Name"
          :label="`${$t(field.Desc)} (${field.unit})`"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        style="margin-top: 20px"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  watchEffect,
  getCurrentInstance,
  onUnmounted,
} from "vue";

import * as echarts from "echarts";
import moment from "moment";
import router, { state } from "../router";
import YAxisConfig from "./YAxisConfig.vue";
import * as utils from "../utils/utils";
import { ElMessageBox } from "element-plus";

const instance = getCurrentInstance();
const $axios = instance.proxy.$axios;
const $message = instance.proxy.$message;
const $t = instance.proxy.$t;

const loading = ref(true);
const singleTableRef = ref(null);
const fields = ref([]);
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(calculatePageSize());

function calculatePageSize() {
  return 10;
}

function goBack() {
  console.log("goBack");
  router.go(-1);
}
const exportCSV = async () => {
  try {
    const { data } = await $axios.post(
      "/table/qs/savecsv",
      {
        start_time: state.query.start_time,
        end_time: state.query.end_time,
        batch: state.query.batch,
        // rcp_type: state.query.rcp_type,
        table_name: "Data" + state.tbid,
        db: state.db,
        fields: state.query.fields,
        lang: state.lang,
        freq: state.freq,
      },
      { timeout: 9000 }
    );
    $message({
      message: $t("保存成功"),
      type: "success",
    });
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
};

const search = async () => {
  try {
    loading.value = true;
    const { data } = await $axios.post(
      "/table/qs/query",
      {
        start_time: state.query.start_time,
        end_time: state.query.end_time,
        batch: state.query.batch,
        table_name: "Data" + state.tbid,
        db: state.db,
        fields: state.query.fields,
        lang: state.lang,
        freq: state.freq,
        page_size: pageSize.value,
        page_number: currentPage.value,
      },
      { timeout: 9000 }
    );

    // 处理时间列格式
    tableData.value = utils.processTableTimeData(data.data, state.lang);
    total.value = data.total_items;
    loading.value = false;
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
};
function init_fields() {
  let _ = localStorage.getItem(`table_${state.lang}_fields`);
  if (_ != "" && _ != undefined) {
    let jsonFields = JSON.parse(_);
    fields.value = jsonFields.filter((item) => item.checked);
  }
  const checkedFields = fields.value
    .filter((item) => item.checked === true)
    .map((item) => item.Name); //Name是数据库字段名
  return checkedFields;
}

function rowClick() {}

onMounted(() => {
  var checkFields = init_fields();
  console.log(fields.value);
  search();
});

const handleCurrentChange = (page) => {
  currentPage.value = page;
  search();
};
</script>


<style scoped>
.my-icon {
  background-image: url("/assets/return.png");
}

.container1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.floating-button {
  left: 20px;
  top: 20px;
  padding: 10px;
  margin: 10px;
  z-index: 999;
}
</style>